<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src = 'script/jquery-1.12.4.min.js'></script>
        <script>
            /*
                库 / 框架
                    库 : 仓库, 拥有很多便利性、特色等的方法 的 js文件，简称 脚本库
                        (专门用于ajax的操作的 脚本库) - 每个库能独立完成一定功能 - 解决方案
                        (专门用于读取文件的 脚本库)
                    框架 : 一般来说 是众多解决方案的集合。(是包含了库)

                jQuery 本身就是 javascript
                    核心开发库   （体积很小， 功能很多， 语法简单， 上手容易，做了尽可能大的兼容工作）

                    UI框架 (基于核心库开发出来的)

                    插件库

                    学习社区 (论坛)

                    历史:
                        jquery 1.0
                        jquery 1.3.0

                        ...

                        jquery 3.2.1


                        jquery 1.x  适用IE6+
                        jquery 2.x  适用IE9+
                        jquery 3.x  优化版


                    API: Application Interface 应用程序接口

                    方法列表 (通俗的理解)


                javascript
                    3个组成部分
                        ecmascript
                        bom
                        dom
                    变量、数据类型
                    语法逻辑控制

                    内置对象以及方法

                    主要目的做页面控制
                        步骤1:抓取页面节点
                        步骤2:页面控制
                            添加节点
                            修改节点
                            删除节点
                            控制样式
                            添加事件


            */
            //页面加载完成
            window.onload = function() {
                /*document.getElementById('testDiv').innerText = 'hello world!';//FF不支持
                document.getElementById('testDiv').textContent = 'hello world!';
                document.getElementById('testDiv').style.cursor = 'pointer';
                document.getElementById('testDiv').style.border = '1px solid red';*/
            };

            //页面文档结构解析完成  ready -> 文档结构解析
            jQuery(function($) {
                // $(document).ready(function() {  ...  });
                // $(function() {});


                /*
                    选择器
                    eq equals  和什么相等
                    gt greater than  比什么大
                    lt less then 比什么小
                */

                /*
                 jquery使用方便
                 抓取元素简单
                 填充内容操作 操作简单(兼容处理)
                 链式编码

                 jquery对象 -> 其实就是数组

                 js对象  <==>  document.getElementById()
                 jq对象  <==>  $(xxx)

                 js对象 转化 jq对象
                 */

                // var myDiv = document.getElementById('testDiv');
                // myDiv 就是 js对象
                // myDiv.style.border = '1px solid red';

                // js对象 转化成 jq对象
                // 只要是jq对象, 就能使用jq的强大的方法
                // $(myDiv).css({border:'1px solid red'});

                // var $myDiv = $('#testDiv');
                // jq对象转换成js对象
                // var myDiv = $myDiv[0];
                // myDiv.style.border = '1px solid red';

                //text 填充节点内容 样式表的控制
                $('#testDiv').css({border:'1px solid red',cursor:'pointer'}).text('hello world!');

                $('.myUl li:last').css({backgroundColor:'red'});

                // 思路: 先确定大范围, 再定位具体元素
                $('li:last', $('#myUl')).css({backgroundColor:'blue'});
            });


            // jquery -> 对象(特殊)
        </script>
    </head>
    <body>
        <div id = 'testDiv'>test</div>
        <div>
            <div>
                <p>myp1</p>
            </div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div>
            <ul id = 'myUl'>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <div>
                <p>myp2</p>
            </div>
        </div>
        <div>
            <div>
                <p>myp3</p>
            </div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </body>
</html>